<template>
  <el-container>
    <el-aside :width="!isCollapse ? '200px' : '60px'">
      <el-menu
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
        :collapse-transition="false"
        :router="true"
      >
        <MenuTree :menuList="menuList"></MenuTree>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>
          <i
            @click="doCollapse"
            :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
          ></i>
        </div>
        <div>
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="el-dropdown-link">
              <img :src="src" alt="" />
              <span class="el-icon-caret-bottom"></span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-house" command="home"
                >首页</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-switch-button" command="exit"
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <!-- 也是用来装载页面 -->
        <!-- 这个路由是一个嵌套路由 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 引入组件
import MenuTree from "@/components/MenuTree.vue";
import { getUserList } from "@/api/user";
import { getTree } from "@/api/menu";
import { mapMutations  } from 'vuex';// 从vuex中导入mapState
import { USERLOGIN, USERLOGOUT } from "@/store/types";
export default {
  data() {
    return {
      //是否折叠
      isCollapse: false,
      src: "https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png",
      menuList: [],
    };
  },
  components: {
    // 注册组件
    MenuTree,
  },
  methods: {
    ...mapMutations([USERLOGIN,USERLOGOUT]),
    handleOpen() {},
    handleClose() {},
    doCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    handleCommand(command) {
      if (command === "home") {
        this.$router.push("/home");
      } else if (command === "exit") {
        this[USERLOGOUT]();
        this.$router.push("/");
      }
    },

    async getMenuList() {
      let result = await getTree();
      this.menuList = result.data.tree;
    },
  },
  created() {
    //加载菜单
    this.getMenuList();
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}

.el-menu {
  border-right: 0;
}

.el-header {
  // 设置盒子为flex布局
  display: flex;
  // 在主轴方向的一个属性
  justify-content: space-between;
  div {
    display: flex;
    align-items: center;
    i {
      font-size: 26px;
    }
    img {
      width: 45px;
      height: 45px;
    }
    span {
      margin-bottom: 5px;
      align-self: flex-end;
    }
  }
}

.el-header,
.el-footer {
  background-color: #e3e3e3;
  color: #333;
}

.el-aside {
  background-color: #545c64;
}

.el-main {
  background-color: #ffffff;
}
</style>